<template>
  <view class="waterfall">
    <view
      class="waterfall-item"
      v-for="(item, index) in itemList"
      :key="index"
      :style="{ height: item.height + 'px' }"
    >
      <!-- 这里放置你要展示的内容 -->
      <image :src="item.src" style="width: 100px; height: 100px;" />{{index}}
    </view>
  </view>
</template>
 
<script>
export default {
  data() {
    return {
      itemList: [], // 瀑布流中的项目列表
      columns: 3, // 列数
      columnWidth: [], // 列宽度
      containerWidth: 0, // 容器宽度
    };
  },
  methods: {
    // 初始化列宽度和容器宽度
    initColumnWidth() {
      this.containerWidth = uni.upx2px(750); // 假设是750upx宽
      this.columnWidth = Array(this.columns).fill(0);
    },
    // 计算最短列的索引
    getMinColumnIndex() {
      return this.columnWidth.indexOf(Math.min(...this.columnWidth));
    },
    // 添加新的条目
    addItem(item) {
      const index = this.getMinColumnIndex();
      const itemHeight = uni.upx2px(item.height); // 假设高度是以upx为单位
      this.itemList.push({
        ...item,
        height: itemHeight,
        top: this.columnWidth[index],
      });
      this.columnWidth[index] += itemHeight;
	  console.log(this.itemList)
    }
  },
  mounted() {
    this.initColumnWidth();
    // 假设你有一个数据列表
    const itemListData = [
      // 每个项目有src和height属性
      { src: 'https://copyright.bdstatic.com/vcg/creative/cc9c744cf9f7c864889c563cbdeddce6.jpg@h_1280', height: 200 },
      { src: 'https://copyright.bdstatic.com/vcg/creative/cc9c744cf9f7c864889c563cbdeddce6.jpg@h_1280', height: 300 },
	  { src: 'https://copyright.bdstatic.com/vcg/creative/cc9c744cf9f7c864889c563cbdeddce6.jpg@h_1280', height: 300 },
	  { src: 'https://copyright.bdstatic.com/vcg/creative/cc9c744cf9f7c864889c563cbdeddce6.jpg@h_1280', height: 300 },
	  { src: 'https://copyright.bdstatic.com/vcg/creative/cc9c744cf9f7c864889c563cbdeddce6.jpg@h_1280', height: 300 },
	  { src: 'https://copyright.bdstatic.com/vcg/creative/cc9c744cf9f7c864889c563cbdeddce6.jpg@h_1280', height: 300 },
      // ...更多项目
    ];
    itemListData.forEach(item => {
      this.addItem(item);
    });
  }
};
</script>
 
<style scoped>
.waterfall {
  display: flex;
}
 
.waterfall-item {
  position: absolute;
  left: 0;
}
 
/* 假设你想要的列宽 */
.waterfall-item image {
  width: 100%;
}
</style>